<script setup name="header">
import { HamburgerButton, Voice } from '@icon-park/vue-next'
import IconPark from '@/components/common/IconPark.vue'
import Search from '@/components/common/Search.vue'
</script>

<template>
  <van-row class="header" align="center" justify="center">
    <van-col span="2" class="header-menu">
      <IconPark :icon="HamburgerButton" :size="7" :strokeWidth="3" />
    </van-col>
    <van-col span="20">
      <Search />
    </van-col>
    <van-col span="2">
      <IconPark :icon="Voice" :size="6" :strokeWidth="3" />
    </van-col>
  </van-row>
</template>

<style scoped lang="scss">
.header {
  background-color: var(--color-background);
  line-height: 1;
  z-index: 1;
  height: 48px;

  &-menu {
    padding-left: 6px;
  }
}
</style>